<template>
	<view>
		<z-paging ref="paging" v-model="courseLists" @query="queryList" auto-height :emptyViewSuperStyle="{}" :pagingContentStyle="{'flex':courseLists.length>0?1:0,display:'flex',flexDirection:'column'}" :loading-full-fixed="true" :showEmpty="true">
			<view slot="top">
				<u-search wrap-bg-color="#78C9FF" bg-color="white" placeholder="请输入课程关键词" v-model="keyword" @search="courseSearch" @clear="courseSearch"></u-search>
				<swiper class="partner-nav-area u-margin-left-30 u-margin-right-30" @change="change" v-if="is_recommend == ''">
					<swiper-item v-for="v in courseCategory">
						<u-grid :col="4" :border="false">
							<u-grid-item v-for="(item,index) in v" :key="index" bg-color="transparent">
								<navigator :url="`/yixu/pages/curriculum/lists?id=${item.id}`" hover-class="none">
									<u-icon :name="item.icon" :size="46"></u-icon>
									<view class="nr u-padding-top-10">{{item.name}}</view>
								</navigator>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>
			<view class="content-area u-flex-1"  v-if="courseLists.length > 0">
				<curriculum-item v-for="(v,k) in courseLists" :key="k" :isEnd="k+1 == courseLists.length" :information="v"></curriculum-item>
			</view>
			<view slot="loading">
				<xy-loading></xy-loading>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		queryCategoryDatas,
		queryListsDatas
	} from "@/api/course";
	export default {
		data() {
			return {
				id:'',
				is_recommend:'',
				keyword: '',
				courseLists: [],
				courseCategory:[]
			};
		},
		onLoad(e) {
			if(!uni.$u.test.isEmpty(e.is_recommend))this.is_recommend = e.is_recommend
			if(!uni.$u.test.isEmpty(e.id))this.id = e.id
			this.queryCourseCategoryDatasFun();
		},
		methods: {
			async queryList(pageNo, pageSize) {
				let { data } = await queryListsDatas({
					keyword:this.keyword,
					page_no: pageNo,
					page_size:pageSize,
					id:this.id,
					is_recommend:this.is_recommend,
				});
				this.$refs.paging.complete(data.list);
			},
			async queryCourseCategoryDatasFun(){
				let { data } = await queryCategoryDatas();
				this.courseCategory = [];
				for (let i = 0; i < data.length; i += 4) {
					this.courseCategory.push(data.slice(i, i + 4));
				}
			},
			courseSearch(){
				this.$refs.paging.reload()
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background: linear-gradient(to top, #FFFFFF 0%, #E0F2FF 23.69%, #9CD7FF 72.53%, #78C9FF 100%);
		
		.partner-nav-area{
			height: 150rpx;
		}
		
		.content-area{
			border-radius: 20rpx 20rpx 0 0;
			background: linear-gradient(180deg, #D6EEFF 0%, #FFFFFF 7.33%, #FFFFFF 100%);
			
			border: 1px solid #FFFFFF;
		}
	}
	.zp-paging-container-content{
		flex: 1;
	}
</style>